<?php defined('SYSPATH') or die('No direct script access.');?>
<style type="text/css">
    .product{
        padding: 30px;
        border-color: gainsboro;
        border-style: solid;
        border-width: 1px;

        margin: 10px;

    }
    .img{
        float: left;
        padding: 10px;
    }
    .description{
        text-align: left;
        font-size: 14px;

    }
    .description img{
        padding-right: 10px;
        display:  inline;
        
    }
    table.userlist {
        margin: 20px auto;
        width: 100%;
        text-align: left;
        border-collapse: collapse;
    }
    .userlist th {
        background-color: #555555;
        color: #ffffff;
        padding: 5px 10px;
        font-weight: normal;
    }
    .userlist td {
        color: #666666;
        padding: 5px 10px;
    }
    .userlist a {
        color: #666666;
        font-weight: bold;
    }
    .userlist .even {
        background-color: #f4f4f4;
    }

    .userlist .odd {
        background-color: #ffffff;
    }
    a.register-button:hover,
    a.login-link:hover,
   /* #conveniently:hover{background:url('/ebay/images/advantage-buttons.jpg') 0 -54px no-repeat}
    #favourably:hover{background:url('/ebay/images/advantage-buttons.jpg') -177px -54px no-repeat}
    #reliably:hover{background:url('/ebay/images/advantage-buttons.jpg') -354px -54px no-repeat} */
    .press{margin:40px 30px 0 30px}
    a#press-chip:hover{background-position:-170px 0}
    a#press-rambler:hover{background-position:-170px -56px}

    .login {
        margin-right: 10px;
        color: #06455E;
        text-shadow: 0 1px 0 #80D6F9;
        background-color: #82CAE7;
        /*background: url();
        */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #82CAE7), color-stop(1%, #D4F2FE), color-stop(3%, #A8E4FD), color-stop(70%, #02A2E5), color-stop(100%, #0A8EC3));
        margin: 7px 0 0 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        display: inline-block;
        padding-left: 1.5em;
        padding-right: 1.5em;
        height: 2em;
        line-height: 2em;
        text-decoration: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-size: 13px;
        -webkit-box-shadow: 0 1px 2px 0 #333;
        -moz-box-shadow: 0 1px 2px 0 #333;
        box-shadow: 0 1px 2px 0 #333;
        border: 0;
        position: relative;
    }
    h2{margin: 0}

    .txctra{
        border:1px solid #85c2de;
            padding:9px;-webkit-border-radius:7px;-moz-border-radius:7px;
            font-size:15px;font-weight:bold;color: #333;
    }

    input.quantity {
        width: 30px;
        border: 1px inset #000000;
        margin: 6px;
    }
    #buttonAdd{
        float: right;
        margin-left: 125px;
        margin-top: -33px;
    }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<center>
 <!--Стили для всплывающей подсказки-->   
<style>
.tooltip
{
  position: relative;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute; 
  bottom: 5px;
  left: 50%;
  z-index: 999;
  width: 130px;
  margin-left: -180px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: 9px;
  left: 50%;
  margin-left: 76px;  
  border-top: 0;
  border-left: 0;
  border-right: 0;        
  border-bottom: 8px solid transparent;  
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: 9px;
}

/* Yellow */

.yellow-tooltip span
{

  border-color: #e1ca82;
  background-color: #ffeaa6;                     
}

.yellow-tooltip span:after
{ 
  border-top-color: #ffeaa6;
}

.yellow-tooltip span:before
{
  border-top-color: #e1ca82;
}

/* Navy */

.navy-tooltip span
{
  color: #fff;
  text-shadow: 0 1px 0 #000;  
  border-color: #161a1f;
  background-color: #1e2227;
}

.navy-tooltip span:after
{ 
  border-top-color: #1e2227;
}

.navy-tooltip span:before
{
  border-top-color: #161a1f;
}

/* Blue */

.blue-tooltip span 
{
  border-color: #59add4;
  background-color: #61bde7;
}

.blue-tooltip span:after
{ 
  border-top-color: #61bde7;
}

.blue-tooltip span:before
{
  border-top-color: #59add4;
}

/* Pink */

.pink-tooltip span 
{
  border-color: #ce4378;
  background-color: #ea4c88;
}

.pink-tooltip span:after
{ 
  border-top-color: #ea4c88;
}

.pink-tooltip span:before
{
  border-top-color: #ce4378;
}
</style>

<!-- AdPacks -->
<style>
#adpacks-wrapper{font-family: Arial, Helvetica;width:280px;position: fixed;_position:absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 10px;-moz-box-shadow: 0 0 15px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;}
body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 10px 0 0;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 11px;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:9px;margin: -15px 0 0 0;text-align:right;}
body .one .bsa_it_ad .bsa_it_d{font-size: 11px;}
body .one{overflow: hidden}
</style>
    <div class="product">
        <?php if(isset($product['Title'])):?>
         <h2><?php echo $product['Title']?> </h2>
        <table>

            <tr>
                <td>
                    <div class="img">
                        <img alt='' src="<?php echo $product['src']; ?>"/>
                        
                        <div class="fb-like" data-send="false" data-width="450" data-show-faces="false"></div>
                        
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="none" data-size="large">Tweet</a>
                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    
                        
                        <link id="gpp" rel="canonical" href="http://amz.org.ua/" />
                        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
                        <script type="text/javascript">
                        $("#gpp").attr('href',document.location.href);
                        </script>
                        <g:plusone></g:plusone>
                        
                    </div>
                </td>
                <td>
                    <div class="description">
        
            <?php
            echo isset($product['Model']) ? $product['Model'] : '';   
            echo '<br /><br /><b>Price: </b>', $product['Price'], '<br /><br />';
            $i=1;
            if(isset($product['Feature']))
                foreach ($product['Feature'] as $i => $feature)
                    if($i < 3):?>
                    <img alt="-" src="/images/star.png"/><?php echo $feature;?><br /><br />
                 <?php
                 else:
                     break;
                 endif;?>
                    
            <?php if($product['Available']):?>
            <div style="float:left">
                <div style="float:right; width: 250px">
                <form method="post" action="/shop/cart">
                    <input type="hidden" name="asin" value="<?php echo $product['asin'];?>">
                    
                    Quantity:<input type="text" name="quantity" value="1" maxlength="3"
                                    onkeyup="validForm(this)" class="quantity" >

                        <input id="buttonAdd" type="image" src="/images/AddToCart.png" >
                    <div id="msg">Please enter the number</div>
                </form>
                </div>
                <div style="float: right; margin-top: 5px;">
                <?php if($product['wList'] == 1): ?>
                    <form method="post" action="/shop/wishlist">
                        <input type="hidden" name="asin" value="<?php echo $product['asin'];?>">
                        <input type="image" src="/images/AddToWishList.png">
                    </form>
                <?php elseif(Auth::instance()->logged_in()): ?>
                    <form action="/shop/wishlist" method="post">
                       <div class="tooltip blue-tooltip" ><input type="image" src="/images/button_delete_blue.png"><span>delete from wishlist</span></div>
                       <input type="hidden" name="remove" value="<?php echo $product['asin'];?>">
                    </form>
                <?php endif; ?> 
                </div>
            </div>

     
            <?php else:
                echo 'Not Available';
            endif;?>
            <br />
            
        </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table class = "userlist">
                <tr class = "main"><th>Param</th><th>Details</th></tr>
                <?php
                $i=1;
                $bad_attr = array('Price', 'Title', 'Feature', 'src', 'Model', 'asin');
                foreach ($product as $attrib => $val)
                {
                    if(!(is_array($val) || in_array($attrib, $bad_attr))) // если это масси или неподходящий атрибут
                    {
                        if ($i%2)// light
                            echo '<tr class="odd">';
                        else
                            echo '<tr class="even">';
                        echo '<td>',$attrib,'</td><td>',$val,'</td></tr>';
                        $i++;
                    }
                }
?>          </table>
                </td>
               
            </tr>
        </table>
         <!-- fb comments /-->
         <div id="fb-root"></div>
                        <script>(function(d, s, id) {
                          var js, fjs = d.getElementsByTagName(s)[0];
                          if (d.getElementById(id)) return;
                          js = d.createElement(s); js.id = id;
                          js.src = "//connect.facebook.net/en_Us/all.js#xfbml=1";
                          fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));</script>
                        <fb:comments  href="http://amz.org.ua/shop/product/<?php echo $product['asin'];?>" width="470" num_posts="2"></fb:comments>
         <!-- comments /-->
         <style type="text/css">
             .comment {
                 text-align: left;
                 width: 60%;
                 border-top: 1px dotted #757575; 
                 margin-bottom: 5px;
                 padding-top: 5px;
                 position: relative;
             }
             #moreDiv{display: none}
         </style>

            <div id="comments"></div>
            <img src="/images/ajax-bar-loader.gif" alt="loading..." title="Loading" id="progressbar1"/>
            <div id="moreDiv">
                <img id="moreButton" src="/images/green.png" alt="More" title="Read more comments" style="cursor: pointer" />
                <div>(Total <?php echo $commentCount;?> comments)</div>
            </div>

            <?php if($user_id): ?>
            <form method="post" action="">
                <br />
                <h3>Your Comment:</h3>
                <textarea rows="3" cols="40" class="txctra" name="text"></textarea>
                <br />
                <input type="image" src="/images/button-add-comment.jpg" style="margin: 10px;"/>
            </form>
            <?php else:?>
            <div style="margin:40px;">
                You must <a href="/shop/create">register</a> if you want to post a comment.
                <!--You don't need to register just to read the comments.-->
            </div>
            <?php endif;?>

        <script type="text/javascript">
        $(document).ready(function(){
            var CommentsPerPage = 10;
            var CommentsCount = <?php echo $commentCount;?>;
            var c = 0; /* сколько комментариев загружено */

            function htmlComment(post){
                return "<div class=\"comment\" id='comment" + post.id + "'>"
                        + "<div style=\"margin-bottom:10px;\"><strong>"
                        + post.username + ":</strong> "
                        + "<div style=\"float:right\"><small>"
                        + post.time + "</small></div>"
                        + "</div><div>" + post.text + "</div></div>";
            }

            $.post('/ajax/comments',
            
            <?php if($comment):?>
            {id : <?php echo $comment;?>, asin : '<?php echo $product['asin'];?>'},
            <?php else:?>
            {asin : '<?php echo $product['asin'];?>', limit : CommentsPerPage},
            <?php endif;?>

            function(data){
                var str = "<h2>Comments</h2>";
                $.each(data, function(index, post){
                    str += htmlComment(post);
                    c++;
                });
                if(c < CommentsCount){/*нужно показать кнопку more*/
                    $("#moreDiv").show();
                }else {
                    $("#moreDiv").hide();
                }

                if('<h2>Comments</h2>' != str)
                    $('#comments').html(str);

                $("#progressbar1").hide();
                <?php if($comment):?>
                document.location.href = '/shop/product/<?php echo $product['asin'];?>/?comment=<?php echo $comment;?>#comment<?php echo $comment;?>';
                <?php endif;?>
            },
            'json');

            $("#moreButton").click(function () {/*click на кнопку more, подгрузка комментариев*/
                $("#progressbar1").show();
                $.post('/ajax/comments',
                        {asin:'<?php echo $product['asin'];?>', limit:CommentsPerPage, start:c},
                        function (data) {
                            var str = "";
                            $.each(data, function (index, post) {
                                str += htmlComment(post);
                                c++;
                            });
                            if (c >= CommentsCount) {
                                $("#moreDiv").hide();
                            }
                            $('#comments').html($('#comments').html() + str);

                            $("#progressbar1").hide();
                        },
                        'json');
            });
        });
        </script>
         <!-- /comments /-->
        <?php else:?>
        Product not found.
        <?php endif;?>
    </div>
</center>
   

<!-- similar items -->
<?php
$countSimilar = count($similar);//сколько похожих товаров мы нашли
if($countSimilar): //если есть похожие?>
<style type="text/css">
.news_slider {
  position: relative;
  width: 850px;
  margin:0;
  text-align: left;
}
.news_slider .messaging {
  display: block;
  padding: 5px;
  margin: 0 20px 5px 20px;
  background: #ffffcc;
}
.news_slider .prev, .news_slider .next {
  position: absolute;
  top: 42%;
  display: none;
}
.news_slider .next {
  right: 0;
}
.news_slider .container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.news_slider .news_items {
  /* Важно!
  Ширина должна быть
  равна .item ((width +
  margin-right) * 2) */
  position: relative;
  /*width: 360px;*/
  width: 720px;
  top: 0;
  left: 68px;
  overflow: hidden;
}
.news_slider .view_all {
  font-size: .8em;
  padding: 5px;
  margin: 0 0 2px 0;
  text-align: center;
}
.news_slider .item {
  /* Важно!
  Обязательно определяем
  свойства width и
  margin-right. */
  width: 170px;
  margin-right: 10px;
}
.news_slider .item div {
  font-size: .8em;
  width: 170px;
  padding: 10px 0 10px 0;
}
.news_slider .item img {
  padding: 10px;
}
.fl {
  float: left;
  display: inline;
}
img {
  border: 0;
  display: block;
}
</style>
<script type="text/javascript">
function validForm(f) {
    // Если введено число, то скрываем предупреждение
    if (isDigit(f.value) > 0){
        $("#buttonAdd").attr('disabled',false);
        $("#msg").hide();
    }
    // В противном случае отображаем предупреждение
    else {
        $("#msg").show();
        $("#buttonAdd").attr('disabled',true);
        }
   }
   // Функция по проверке, число введено или нет
   function isDigit(data) {
    var numStr="0123456789";
    var k = 0;
    if(data.length == 0)
        return 0;

    for (i=0;i<data.length;i++) {
      thisChar = data.substring(i, i+1);
      if (numStr.indexOf(thisChar) != -1) k++;
    }
    if (k == data.length) return 1;
    else return 0;
   }

jQuery.fn.accessNews = function(settings) {
    settings = jQuery.extend({
        newsHeadline: "Top Stories",
        newsSpeed: "normal"
    }, settings);
    return this.each(function(i) {
        aNewsSlider.itemWidth = parseInt(jQuery(".item:eq(" + i + ")",".news_slider").css("width")) + parseInt(jQuery(".item:eq(" + i + ")",".news_slider").css("margin-right"));
        aNewsSlider.init(settings,this);
        jQuery(".view_all > a", this).click(function() {
            aNewsSlider.vAll(settings,this);
            return false;
        });
    });
};

var countInline = 4;
var aNewsSlider = {
    itemWidth: 0,
    init: function(s,p) {
        jQuery(".messaging",p).css("display","none");
        itemLength = jQuery(".item",p).length;
        if (jQuery(".view_all",p).width() == null) {
            jQuery(".news_items",p).prepend("<p class='view_all'>"
                + s.newsHeadline + "&nbsp; </p>");
        }
        newsContainerWidth = itemLength * aNewsSlider.itemWidth;
        jQuery(".container",p).css("width",newsContainerWidth + "px");
        jQuery(".next",p).css("display","block");
        animating = false;
        jQuery(".next",p).click(function() {
            if (animating == false) {
                animating = true;
                animateLeft = parseInt(jQuery(".container",p).css("left")) - (aNewsSlider.itemWidth * countInline);
                if (animateLeft + parseInt(jQuery(".container",p).css("width")) > 0) {
                    jQuery(".prev",p).css("display","block");
                    jQuery(".container",p).animate({left: animateLeft}, s.newsSpeed, function() {
                        jQuery(this).css("left",animateLeft);
                        if (parseInt(jQuery(".container",p).css("left")) + parseInt(jQuery(".container",p).css("width")) <= aNewsSlider.itemWidth * countInline) {
                            jQuery(".next",p).css("display","none");
                        }
                        animating = false;
                    });
                } else {
                    animating = false;
                }
            }
            return false;
        });
        jQuery(".prev",p).click(function() {
            if (animating == false) {
                animating = true;
                animateLeft = parseInt(jQuery(".container",p).css("left")) + (aNewsSlider.itemWidth * countInline);
                if ((animateLeft + parseInt(jQuery(".container",p).css("width"))) <= parseInt(jQuery(".container",p).css("width"))) {
                    jQuery(".next",p).css("display","block");
                    jQuery(".container",p).animate({left: animateLeft}, s.newsSpeed, function() {
                        jQuery(this).css("left",animateLeft);
                        if (parseInt(jQuery(".container",p).css("left")) == 0) {
                            jQuery(".prev",p).css("display","none");
                        }
                        animating = false;
                    });
                } else {
                    animating = false;
                }
            }
            return false;
        });
    },
    vAll: function(s,p) {
        var o = p;
        while (p) {
            p = p.parentNode;
            if (jQuery(p).attr("class") != undefined && jQuery(p).attr("class").indexOf("news_slider") != -1) {
                break;
            }
        }
        /*if (jQuery(o).text().indexOf("See more") != -1) {
            jQuery(".next",p).css("display","none");
            jQuery(".prev",p).css("display","none");
            jQuery(o).text("See less");
            jQuery(".container",p).css("left","0px").css("width",aNewsSlider.itemWidth * countInline + "px");
        } else {
            jQuery(o).text("See more");
            aNewsSlider.init(s,p);
        }*/
    }
};


$(document).ready(function(){
// ---- News Slider -----
$(".misc_news").accessNews({
    newsHeadline: "Continue Shopping: Customers Who Bought Items in Your Recent History Also Bought",
    newsSpeed: "normal"
});
document.getElementById("msg").style.display = "none";
// ---- News Slider -----
});
</script>


<!--<div class="main-wrapper " align = "center">-->
    <div align = "center">
        <div class="news_slider misc_news">
            <div class="messaging">
    
</div>
<a href="#" class="prev"><img src="/images/button_grey_rewind.png"/></a>
<?php
if($countSimilar>4)
        echo "<a href=\"#\" class=\"next\"><img src=\"/images/button_grey_fastforward.png\" /></a>";
?>

<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
        
<?php
if($countSimilar<2)
    $countSimilar = 2;
elseif($countSimilar>8)
    $countSimilar = 9;

for ($i = 0; $i < $countSimilar-1; $i++)
{
    
    
?>
    <tr>
   <div class="item fl">
   <table cellpadding = '10' rowspacing = '0' border='0' 
            style="background-color:#FFF;" >
   <tr>
   <?php echo '<td align="center">',"<a href=\"/shop/product/" , $similar[$i]['ASIN'] . "\">",
       '<img height="90" src="' . $similar[$i]['src']
            . '"></a><br><br></td>';?>
   </tr>
   <div class="fl">

    <?php
    if (isset($similar[$i]['title'])
            && mb_strlen($similar[$i]['title'], 'UTF-8') > 40)
        $similar[$i]['title']
                = mb_substr($similar[$i]['title'], 0, 40, 'UTF-8') . '... ';
    ?>
    <tr>
    <td height="70" valign="bottom">
    <?php echo "<a href=\"/shop/product/" , $similar[$i]['ASIN'] . "\">", $similar[$i]['title'], "</a><br>";
    echo $similar[$i]['price'];?>
    </td>
    </div>
    </tr>
    </table>
    </div>
<?php
    }       
 ?>       
            </div>
        </div>
    </div>
</div>


<?php endif;//end similar items
